import React, { useState } from 'react';
import { Card, Input, Flex, Space } from 'antd';
import Tab from '../components/Tab';
import { SearchOutlined} from '@ant-design/icons';
import DTable from '../components/DTable';
import { Outlet, useLocation } from 'react-router-dom';

const QuestionManage: React.FC = () => {
  const [tab, setTab] = useState('全部');
  const [inputValue, setInputValue] = useState('');
  const [keyword, setKeyword] = useState('');
  const location = useLocation();
  
  const handleTabChange = (tab: string) => {
    setTab(tab);
  };
  const handleSearch = (e: React.KeyboardEvent<HTMLInputElement> ) => {
    if (e.key === 'Enter') {
      setKeyword(inputValue.trim())
    }
  };

  // 如果当前路径包含子路由，则只渲染子路由！！！！！
  if (location.pathname.includes('/set-question') || 
      location.pathname.includes('/ai-question') || 
      location.pathname.includes('/edit-question')) {
    return <Outlet />;
  }

  // 否则渲染题目列表
  return (
    <Space
      direction="vertical"
      size="middle"
      style={{ width: '100%', display: 'flex', backgroundColor: '#f5f5f5',borderRadius:4 }}
    >
      <Card style={{  backgroundColor: '#fff',margin:10,marginRight:5 }}>
        <Flex gap='large' align="center" style={{ width: '100%' }}>
          <div style={{ flex: 1 }}>
            <Tab onTabChange={handleTabChange} />
          </div>
          <div style={{ flex: 2 }}>
            <Input
              placeholder="请输入试题名称"
              prefix={<SearchOutlined />}
              value={inputValue}
              onChange={e => setInputValue(e.target.value)}
              onPressEnter={handleSearch}
              allowClear
              style={{ width: '100%' }}
            />
          </div>
        </Flex>
      </Card>
      
      <DTable Qtype={tab} keyword={keyword} />
    </Space>
  );
};

export default QuestionManage;
